<template>
  <div class="table-container">
    <!-- table 表格 -->
    <template v-if="!fetching">
      <table class="pc-table" width="100%" ref="pcTableRef">
        <thead>
          <tr>
            <td v-for="(headerItem, index) in header" :key="index">
              <span v-if="!headerItem.types">{{ $t(headerItem.name) }}</span>
              <table v-else>
                <tr>
                  <td colspan="14">{{ $t(headerItem.name) }}</td>
                </tr>
                <tr>
                  <td v-for="(item, index2) in headerItem.types" :key="index2">
                    {{ item }}
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(rowItem, index) in data" :key="index">
            <!-- service -->
            <td>{{ rowItem.service }}</td>
            <!-- repair | city-->
            <td v-if="rowItem.repair">{{ rowItem.repair }}</td>
            <td v-else>{{ rowItem.city }}</td>
            <template v-if="judgeType(rowItem.airport) == 'array'">
              <td class="no-padding">
                <table>
                  <tr>
                    <td v-for="(item, index) in rowItem.airport" :key="index">
                      <div v-if="item == 'Y'">
                        <IconCircleY class="circle-y" />
                      </div>
                    </td>
                  </tr>
                </table>
              </td>
            </template>
            <td>
              <IconConsult style="margin: 0 auto" @click="consult(rowItem)" />
            </td>
          </tr>
        </tbody>
      </table>
      <div class="mobile-table" v-if="data">
        <div class="mobile-table-inner">
          <div class="mobile-table-box-list">
            <div
              class="mobile-table-box-item"
              v-for="(item, index) in data"
              :key="index"
            >
              <div class="header">
                <div class="header-title">
                  <div class="mg-gap">
                    {{ $t(header[0].name) }}：{{ item.service }}
                  </div>
                  <div>{{ $t(header[1].name) }}：{{ item.repair }}</div>
                </div>
                <div class="divider-line"></div>
                <div class="header-airport">
                  <div class="mb-gap">{{ $t(header[2].name) }}：</div>
                  <div class="airport-list">
                    <template
                      v-for="(airportItem, airportItemIndex) in item.airport"
                      :key="airportItemIndex"
                    >
                      <div class="airport-item" v-if="airportItem">
                        <IconCircleY class="circle-y" />
                        <span>{{ header[2].types[airportItemIndex] }}</span>
                      </div>
                    </template>
                  </div>
                </div>
              </div>
              <div class="footer">
                <div class="inner" @click="consult(item)">
                  <IconConsult />
                  <span>{{ $t("btnText.imed_consult") }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
    <template v-else>
      <div class="pc-skeleton">
        <Skeleton pc gap-skeleton block v-for="i in 8" :key="i"></Skeleton>
      </div>
      <div class="mobile-skeleton">
        <Skeleton mobile gap-skeleton block v-for="i in 5" :key="i"></Skeleton>
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
import { inject, nextTick, onBeforeUnmount, ref, watch } from "vue";
import type { TableHeaderItem, TableRowItem } from "../../types/table";

const fetching = inject("fetching");

const emits = defineEmits(["consult"]);
const consult = (data) => {
  let obj = {
    id: data.id,
    service_code: data.service,
    repair_service: data.repair,
    type: props.type,
  };
  emits("consult", obj);
};
type Props = {
  header: TableHeaderItem[];
  data: TableRowItem[];
  type: string;
};
const props = defineProps<Props>();

// 判断airport类型
const judgeType = computed(() => {
  return (variable: string | string[]) => {
    if (Array.isArray(variable)) {
      return "array";
    } else {
      return "string";
    }
  };
});

const bindScrollX = () => {
  let tables = document.querySelectorAll(".table");
  tables.forEach((table, index) => {
    if (index !== 1) {
      let scrollRows = table.querySelectorAll(".scroll-x");
      scrollRows.forEach((scrollRow) => {
        scrollRow.addEventListener("scroll", (e) => {
          let dom = e.target as HTMLElement;
          scrollRows.forEach((item) => {
            item.scrollLeft = dom.scrollLeft;
          });
        });
      });
    }
  });
};

// watch(fetching, (n) => {
//   if (!n) {
//     nextTick(() => {
//       initTableColumnWidth();
//     });
//   }
// });

const pcTableRef = ref<HTMLElement | undefined>();
let cacheTableMaxWidthColumns: any = undefined;
const initTableColumnWidth = () => {
  return;
  if (
    (cacheTableMaxWidthColumns && cacheTableMaxWidthColumns.length > 0) ||
    !pcTableRef.value
  )
    return;
  const theadTables = pcTableRef.value?.querySelectorAll("thead table");
  let maxWidthColumns: any[] = [];
  if (!cacheTableMaxWidthColumns) {
    theadTables?.forEach((tableItem) => {
      let tds = tableItem.querySelectorAll("&>tr:last-child>td");
      tds.forEach((td, index) => {
        maxWidthColumns[index] =
          td.getBoundingClientRect().width.toFixed(2) * 1;
      });
    });
    cacheTableMaxWidthColumns = maxWidthColumns;
  }
  const tbodyTables = pcTableRef.value?.querySelectorAll("tbody table");
  tbodyTables?.forEach((tableItem) => {
    let tds = tableItem.querySelectorAll("td");
    tds.forEach((td, index) => {
      td.style.width = pxToVw(cacheTableMaxWidthColumns[index]);
    });
  });
};

onMounted(() => {
  bindScrollX();
  // initTableColumnWidth();
  // window.addEventListener("reset", initTableColumnWidth);
});

onBeforeUnmount(() => {
  // window.addEventListener("reset", initTableColumnWidth);
});
</script>
<style>
body {
  height: 100%;
}
</style>
<style scoped lang="less">
table {
  font-size: 16px;
  width: 100%;
  text-align: center;
  td tr {
    width: 100%;
  }
  td {
    border-right: 1px solid #fff;
    vertical-align: middle;
    padding: 13px 16px;
    &:last-child {
      border-right: none;
    }
    &:has(table) {
      padding: 0;
      height: 50px;
      table {
        height: inherit;
        td {
          padding: 8px;
          div {
            display: flex;
            justify-content: center;
          }
        }
      }
    }
    &.no-padding {
      padding: 0;
    }
  }
  thead {
    background-color: var(--yd-primary-color);
    color: #fff;
    table {
      td {
        border-right: 1px solid var(--yd-primary-color);
        &:last-child {
          border-right: none;
        }
      }
      tr:last-child {
        background: rgba(255, 255, 255, 0.4);
      }
    }
  }
  thead table tr:last-child,
  tbody table tr {
    display: flex;
    height: 100%;
    td {
      flex: 1;
      div {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }

  tbody {
    & > tr {
      background: #ffffff;
      &:nth-child(odd) {
        background-color: rgba(61, 136, 242, 0.3);
      }
      &:nth-child(even) {
        background-color: rgba(61, 136, 242, 0.1);
      }
    }
  }
}
.circle-y {
  width: 24px;
  height: 24px;
}

.mobile-table {
  display: none;
  font-size: 72px;
  color: #323232;
  .mobile-table-box-list {
    display: flex;
    flex-direction: column;
    gap: 61px;
    .mobile-table-box-item {
      background: #ffffff;
      border-radius: 51px;
      border: 1px solid #cfd2cc;
      .mb-gap {
        margin-bottom: 61px;
      }
      .header {
        padding: 61px;
        .divider-line {
          margin: 61px 0 !important;
          background: #ccd6de;
        }
        .header-airport {
          .airport-list {
            display: flex;
            gap: 102px;
            flex-wrap: wrap;
            row-gap: 61px;
            .airport-item {
              display: flex;
              gap: 41px;
              align-items: center;
              white-space: nowrap;
            }
            .circle-y {
              width: 82px;
              height: 82px;
            }
          }
        }
      }
      .footer {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 61px 0;
        border-top: 1px solid #ccd6de;
        .inner {
          display: flex;
          gap: 41px;
          align-items: center;
          color: var(--yd-primary-color);
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .pc-table {
    display: none !important;
  }
  .mobile-table {
    display: block;
  }
}
</style>
